<!-- 
 *@Description: 水波图
 *@Author: ʟɪ ᴢʜɪ ᴛᴏɴɢ
 *@Date: 2022-10-20 17:29:45
-->
<template>
  <div id="liquidfillEcharts"></div>
</template>
<script>
import 'echarts-liquidfill';
export default {
  name: 'liquidFill',
  data() {
    return {
      durationData: [
        { name: '提前办结率', value: 0.6 },
        { name: '按时办结率', value: 0.3 },
        { name: '超时办结率', value: 0.1 }
      ]
    };
  },
  methods: {
    initCharts() {
      const chart = this.$echarts.init(
        document.getElementById('liquidfillEcharts')
      );
      const option = {
        title: [
          {
            text:
              this.durationData[0].name +
              '：' +
              this.durationData[0].value * 100,
            left: '13%',
            bottom: '8%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontFamily: 'TencentSans'
            }
          },
          {
            text:
              this.durationData[1].name +
              '：' +
              this.durationData[1].value * 100,
            left: '49%',
            bottom: '8%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontFamily: 'TencentSans'
            }
          },
          {
            text:
              this.durationData[2].name +
              '：' +
              this.durationData[2].value * 100,
            left: '84%',
            bottom: '8%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontFamily: 'TencentSans'
            }
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '60%',
            color: ['rgba(62, 249, 198, 1)'],
            center: ['15%', '45%'],
            data: [this.durationData[0].value],
            backgroundStyle: {
              borderWidth: 2,
              borderColor: 'rgba(62, 249, 198, 1)',
              color: 'rgb(0,23,74)'
            },
            outline: {
              itemStyle: {
                borderWidth: 3,
                borderColor: 'rgba(62, 249, 198, 1)',
                borderType: 'dotted'
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: 'rgba(62, 249, 198, 1)',
                  fontFamily: 'TencentSans'
                }
              }
            }
          },
          {
            type: 'liquidFill',
            radius: '60%',
            color: ['rgba(12, 176, 230, 1)'],
            center: ['50%', '45%'],
            data: [this.durationData[1].value],
            backgroundStyle: {
              borderWidth: 2,
              borderColor: 'rgba(12, 176, 230, 1)',
              color: 'rgb(0,23,74)'
            },
            outline: {
              itemStyle: {
                borderWidth: 3,
                borderColor: 'rgba(12, 176, 230, 1)',
                borderType: 'dotted'
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: '#e6e6e6',
                  fontFamily: 'TencentSans'
                }
              }
            }
          },
          {
            type: 'liquidFill',
            radius: '60%',
            color: ['rgb(255,191,67)'],
            center: ['85%', '45%'],
            data: [this.durationData[2].value],
            backgroundStyle: {
              borderWidth: 2,
              borderColor: 'rgb(255,191,67)',
              color: 'rgb(0,23,74)'
            },
            outline: {
              itemStyle: {
                borderWidth: 3,
                borderColor: 'rgb(255,191,67)',
                borderType: 'dotted'
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: '#e6e6e6',
                  fontFamily: 'TencentSans'
                }
              }
            }
          }
        ]
      };
      chart.setOption(option);
    }
  },
  mounted() {
    this.initCharts();
  }
};
</script>
<style scoped>
#liquidfillEcharts {
  padding: 20px 0;
  width: 90%;
  height: 95%;
  margin: 10px 5%;
}
</style>